<template>
  <a-card>
    <a-list :bordered="false">
      <template #header> 群列表 </template>
      <a-list-item
        v-for="item in GroupList"
        :key="item.wxid"
        :style="{
          backgroundColor:
            selectedGroupWxid === item.wxid ? '#E8F3FF' : 'white',
        }"
        @click="handleGetInfo(item)"
      >
        <a-list-item-meta :title="item.nick">
          <template #avatar>
            <a-avatar
              shape="square"
              :trigger-icon-style="{ color: '#3491FA' }"
              v-if="item.avatarMaxUrl"
            >
              <img alt="avatar" :src="item.avatarMaxUrl" />
            </a-avatar>
            <a-avatar shape="square" v-else>
              <icon-user-group />
            </a-avatar>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
    <div
      style="
        display: flex;
        justify-content: center;
        padding-top: 16px;
        padding-bottom: 16px;
      "
    >
      <a-pagination
        :total="count"
        :page-size="pageSize"
        size="mini"
        simple
        :current="current"
        @change="changePage"
      />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useGroupStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import { getGroupList, getGroupInfo } from '@/api/weixin';

  const GroupStore = useGroupStore();
  const selectedGroupWxid = ref('');

  interface GroupItem {
    wxid: string;
    nick: string;
    avatarMaxUrl?: string;
  }

  const props = defineProps<{
    selectedWxid: string;
  }>();

  const current = ref(1);
  const pageSize = ref(10);
  const count = ref(0);
  const loading = ref(false);

  const GroupList = ref<GroupItem[]>([]);
  // 搜索表单数据

  // 获取群列表数据
  const fetchGroupList = async (wxid: string) => {
    loading.value = true;
    try {
      const res: any = await getGroupList(wxid, {
        page: current.value,
        pageSize: pageSize.value,
        field: {
          nick: '',
        },
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        GroupList.value = res.data.list;
      } else {
        Message.error(res.msg || '获取好群列表失败');
      }
    } catch (error) {
      console.error('获取好群列表失败:', error);
    } finally {
      loading.value = false;
    }
  };

  const changePage = async (e: any) => {
    current.value = e;
    await fetchGroupList(props.selectedWxid);
  };

  const handleGetInfo = async (record: any) => {
    try {
      const res: any = await getGroupInfo({
        mywxid: props.selectedWxid,
        wxid: record.wxid,
      });
      if (res.code === 20000) {
        // 保存到状态
        selectedGroupWxid.value = res.data.wxid;
        GroupStore.selectedGroup(
          res.data.wxid,
          res.data.avatarMaxUrl,
          res.data.nick,
          res.data.issave,
          res.data.isauto
        );
      } else {
        Message.error(res.msg || '获取微信信息失败');
      }
    } catch (error) {
      Message.error('获取微信信息失败');
    }
  };

  watch(
    () => props.selectedWxid,
    async (newWxid) => {
      if (newWxid) {
        await fetchGroupList(newWxid);
      }
    },
    { immediate: true }
  );

  watch(
    () => props.selectedWxid,
    (newVal) => {
      if (props.selectedWxid && newVal) {
        fetchGroupList(props.selectedWxid);
      }
    },
    { deep: true, immediate: true }
  );
</script>
